<!--  -->
<template>
  <div>
    <Card>
      	<Form :model="formItem" :label-width="70">
			<Row :gutter="10" type="flex"  align="middle"  >
				<Col span="8">
					<FormItem label="维修单">
						<Input v-model="formItem.orderNumber" placeholder="单号/报修手机号" clearable></Input>
					</FormItem>
				</Col>
				<Col span="8" v-if="user_type!=='01'">
					<FormItem label="客户">
						<Select v-model="formItem.customerUuid" filterable @on-change="searchCustomerChange">
							<Option  v-for="item in moreCustomerList" :value="item.uuid" :key="item.uuid">{{ item.name }}</Option>
						</Select>
					</FormItem>
				</Col>
				<Col span="8">
					<FormItem label="机构">
						<Input @on-focus="s_tree=true;" :disabled="!formItem.customerUuid||formItem.customerUuid=='全部'" v-model="formItem.instName" placeholder="请选择机构" readonly></Input>
						<!-- <Select :disabled="!formItem.customerUuid||formItem.customerUuid=='全部'" v-model="formItem.instuuid" filterable>
							<Option  v-for="item in moreMechanismList" :value="item.uuid" :key="item.uuid">{{ item.name }}</Option>
						</Select> -->
					</FormItem>
				</Col>
			
				<Col span="8">
					<FormItem label="进度">
						<Select v-model="formItem.state" filterable>
							<Option  v-for="item in progressList" :value="item.value" :key="item.value">{{ item.label }}</Option>
						</Select>
					</FormItem>
				</Col>
				<Col span="12">
					<FormItem label="所在地">
						<Cascader change-on-select v-model="search.location" placeholder="请选择省市区" :data="areasData" ></Cascader>
					</FormItem>
				</Col>
				<Col span="12">
					<FormItem label="记录时间">
						<DatePicker :value="search.timeRange" format="yyyy-MM-dd HH:mm" type="datetimerange" placement="bottom-end" placeholder="请选择开始和结束时间"></DatePicker>
					</FormItem>
				</Col>
			</Row>
			<Row  >
				<Col span="8" offset="16"  style="textAlign:right;">
					<Button @click="handleClickgetTable" class="zh-hollow" type="primary" icon="ios-search-strong">搜索</Button>
					<!-- <Button v-if="btnp.wxjlu_dc" class="zh-hollow" type="warning" style="margin-left:25px;">导出EXCEL</Button> -->
					<a style="margin-left:25px;" v-if="btnp.wxjlu_dc" :href="downLoadUrl" target="_blank"><Button  class="zh-hollow" type="warning"  > 导出EXCEL </Button></a>
				</Col>
			</Row>
		</Form>
    </Card>
    <Card style="margin-top:10px;" :padding="0">
      <Table :loading="loading" border :columns="columns" :data="data"></Table>
      <Page  :total="total" show-total show-sizer :current.sync="formItem.pageNumber" @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
    </Card>
   
 
 
    <!-- 报修详情 -->
    <Modal title="报修详情"  v-model="modal_repaire_detail" class="no_footer_modal" :mask-closable="false">
      <div class="detail-form">
        <div class="detail-form-item">
          <label>维修单号：</label>
          <span>{{repaire_details.order_number}}</span>
        </div>
        <div class="detail-form-item">
          <label>记录时间：</label>
          <span>{{repaire_details.time}}</span>
        </div>
        <div class="detail-form-item">
          <label>报修人：</label>
          <span>{{repaire_details.name}}</span>
        </div>
        <div class="detail-form-item">
          <label>联系电话：</label>
          <span>{{repaire_details.mobile}}</span>
        </div>
        <div class="detail-form-item">
          <label>客户：</label>
          <span>{{repaire_details.customername}}</span>
        </div>
        <div class="detail-form-item">
          <label>所在地：</label>
          <span>{{repaire_details.location}}</span>
        </div>
        <div class="detail-form-item">
          <label>机构：</label>
          <span>{{repaire_details.inst_name}}</span>
        </div>
        <div class="detail-form-item">
          <label>报修设备：</label>
          <span style="color:#2d8cf0">{{repaire_details.equip}}</span>
        </div>
        <div class="detail-form-item">
          <label>紧急程度：</label>
          <span>{{repaire_details.urgent}}</span>
        </div>
        <div class="detail-form-item">
          <label>故障类型：</label>
          <span >{{repaire_details.faultType}}</span>
        </div>
        <div class="detail-img-video">
          <span>故障描述：</span>
          <p v-if="!!repaire_details.describe">{{repaire_details.describe}}</p>
          <div v-if="repaire_details.imageList.length>0" class="wrap">
            
            <img v-for="(item,i) in repaire_details.imageList"  :key="i" :src="item" @click="handleClickPicLook(item)" alt="">
          </div>
          <div v-if="!!repaire_details.video" class="wrap">
            <video poster="" @click="handleClickVideoPlay(repaire_details.video)"  :src="repaire_details.video"></video>
          </div>
        </div>
      </div>
      <div class="detail-other zh-flex zh-flex-3" >
          <div class="detail-other-item" style="width:100%;"><label>报修时间：</label>{{repaire_details.startTime}}</div>
          <div class="detail-other-item" style="width:100%;"><label>抄送给：</label>{{repaire_details.CopyNames}}</div>
          
      </div>
      <div class="detail-other zh-flex zh-flex-3" >
          <div class="detail-other-item"><label>维修单位：</label>{{repaire_details.Company}}</div>
          <div class="detail-other-item"><label>维修人员：</label>{{repaire_details.proName}}</div>
          <div class="detail-other-item" style="paddingLeft:110px"><label>维修人员到达时间：</label>{{repaire_details.arrivalTime}}</div>
          <div class="detail-other-item" style="paddingLeft:90px"><label>故障修复时间：</label>{{repaire_details.finishTime}}</div>
      </div>
    </Modal>
    <!-- 查看图片 -->
    <Modal title="查看图片" v-model="look_pic_wrap.look_pic" class="no_footer_modal">
      <img style="width:100%;" :src="look_pic_wrap.src" alt="">
    </Modal>
    <!-- 看视频 -->
    <Modal title="查看视频" v-model="look_video_wrap.look_video" class="no_footer_modal">
      <video style="width:100%;" :src="look_video_wrap.src" controls alt=""></video>
    </Modal>
		<Modal title="选择机构" v-model="s_tree" @on-ok="confirmST" :mask-closable="false" >
			<div style="padding:15px 30px;">
				<Tree :data="s_tree_data"   @on-select-change="s_selectChange"></Tree>
			</div>
		</Modal>
  </div>
</template>

<script>
import {url_rep_records} from '@/libs/downLoadUrl'
import util from '@/libs/util'
import {
	getRepaireDetails,
	getReRecords,
	getReReDetails,
	getOrgTree
} from '@/libs/get.js'
export default {
	name:'repaire',
	data(){
		return {
			s_select_op:[],
			s_tree_data:[],
			s_tree:false,
			downLoadUrl:url_rep_records,
			domain:this.$store.state.app.domain,
			btnp:{},
			btn:{
				wxjlu_dc:false,
				wxjlu_xq:false
			},
			userUuid:'',
			user_type:'',
			/**看视频 */
			look_video_wrap:{
				look_video:false,
				src:''
			},
			/** 查看图片*/
			look_pic_wrap:{
				look_pic:false,
				src:''
			},
			/**维修详情 */
			modal_repaire_detail:false,
			empty_repaire_details:{},
			repaire_details:{
				order_number:'',
				time:'',
				name:'',
				mobile:'',
				customername:'',
				location:'',
				inst_name:'',
				equip:'',
				urgent:'',
				faultType:'',
				startTime:'',
				CopyNames:'',
				Company:'',
				proName:'',
				arrivalTime:'',
				finishTime:'',
				describe:'',
				imageList:[],
				video:'',
				urgent:''
			},
			loading:true,
			total:150,
			search:{
				timeRange:[],
				location:[]
			},
			formItem:{
				orderNumber:'',
				customerUuid:'全部',
				instUuid:'全部',
				instName:'',
				state:'全部',
				pageNumber:1,
				pageSize:10			
			},
			moreMechanismList:[],
			moreCustomerList:[],
			customerList:[],
			mechanismList:[],
			progressList:[
				{
				value:'全部',
				label:'全部'
				},
				{
				value:'14',
				label:'进行中'
				}
				,{
				value:'99',
				label:'已完成'
				}
			],
			areasData:this.$store.state.user.areaData,
			columns:[
				{
				key:'order_number',
				title:'维修单号',
				fixed:'left',
				align:'center',
				minWidth:150
				},
				{
				key:'area',
				title:'所在地',
				minWidth:160
				},
				{
				key:'customerName',
				title:'客户',
				minWidth:130
				},
				{
				key:'instName',
				title:'机构',
				minWidth:130
				},
				{
				key:'mobile',
				title:'报修人手机号',
				align:'center',
				minWidth:120
				},
				{
				key:'time',
				title:'记录时间',
				align:'center',
				minWidth:150
				},
				{
				key:'state',
				title:'进度',
				align:'center',
				minWidth:80
				},
				{
				key:'action',
				title:'操作',
				align:'center',
				minWidth:80,
				fixed:'right',
				render:(h,params)=>{
					//判断是否显示某些操作按钮
					return h('div',[
					h('Button',{
						props:{
						type:'text',
						size:'small'
						},
						style:{
						color:'#2D8CF0',
						display:this.btnp.wxjlu_xq?'inline-block':'none'
						},
						on:{
						click:()=>{
							this.getDatail(params.row.order_number);
							
						}
						}
					},'详情'),
					])
				}
				}
				
			],
			data:[]
		}
	},
	methods:{
		init(){
			let that=this;
			util.isCustomer(this);
			this.empty_repaire_details=JSON.parse(JSON.stringify(this.repaire_details));
			let timer;
			if(that.user_type!=='01'){
				timer=setInterval(()=>{
					if(that.$store.state.user.customer.length>0){
						that.moreCustomerList=[{name:'全部',uuid:'全部'},...that.$store.state.user.customer];
						clearInterval(timer)	
					}
				},500);
			}else{
				this.searchCustomerChange(this.userUuid);	
			}
			// setTimeout(()=>{
			// 	//that.areasData=that.$store.state.user.areaData;
			// 	if(this.user_type!=='01'){
			// 	that.moreCustomerList=[{name:'全部',uuid:'全部'},...that.$store.state.user.customer];
			// 	}
			// },5000);
			// if(this.user_type=='01'){
			// 	this.newSearchCustomerChange(this.userUuid,'search');	
			// } 
		},
		async getSearchInstTree(value){
            this.formItem.instUuid='';
            this.formItem.instName='';
            this.s_select_op=[];
			if(value!=='全部'){
				let res=await getOrgTree(value);
				let response=res.data;
				if(response.code===200){
					this.s_tree_data=util.tree([response.data]);
				}else{
					this.$Notice.error({
						title: '获取机构失败',
						desc:response.msg
					});
				}
			}
		},
		s_selectChange(selectarr){
			this.s_select_op=selectarr;
		},
		confirmST(){
			if(this.s_select_op.length>0){
				this.formItem.instUuid=this.s_select_op[0].value;
				this.formItem.instName=this.s_select_op[0].title;
			}else{
				this.formItem.instUuid='';
				this.formItem.instName='';
			}
		},
		searchCustomerChange(value){
			this.getSearchInstTree(value);
			//this.newSearchCustomerChange(value,'search')
		},
		async newSearchCustomerChange(value,type){
			if(value!=='全部'){
			let res;
			if(type=='search'){
				res =await getBankOrg(value,'','','')
			}else{
				res =await getBankOrg(value,this.addForm.province,this.addForm.city,this.addForm.district)
			}
			if(res.status===200){
				let response=res.data;
				if(response.code===200){
				if(type==='search'){
					this.moreMechanismList=[{uuid:'全部',name:'全部'},...response.data]
				}else if(type==='form'){
					this.mechanismList=response.data
				}
				
				
				}else{
					this.$Notice.error({
						title: '请求出错',
						desc:response.msg
					});
				}
			}else{
				this.$Notice.error({
					title: '请求失败'
				});
			} 
			}else{
			this.formItem.instuuid='';
			}
		},
		async getDatail(order_number){
			let res=await getReReDetails(order_number);
			let response=res.data;
			if(response.code===200){
				let data=response.data;
				this.repaire_details={
					order_number:data.order_number,
					time:data.modified.slice(0,16),
					name:data.repairName,
					mobile:data.repairMobile,
					customername:data.customerName,
					location:data.area,
					inst_name:data.instName,
					equip:data.equipName,
					urgent:data.urgent_level,
					faultType:!!data.faultType?data.faultType:'-',
					startTime:data.created.slice(0,16),
					CopyNames:!!data.ccList?data.ccList:'-',
					Company:!!data.serviceName?data.serviceName:'-',
					proName:!!data.proName?data.proName:'-',
					arrivalTime:!!data.pro_come_at?data.pro_come_at.slice(0,16):'-',
					finishTime:!!data.fixed_at?data.fixed_at.slice(0,16):'-',
					describe:data.describe,
					imageList:!!data.img?data.image.split(','):'',
					video:data.video
				};
				this.modal_repaire_detail=true;
			}else{
				this.$Notice.error({
					desc:response.msg
				});
			}
			 
		},
		pageSizeChange(size){
			//回到第一页
			this.formItem.pageNumber=1;
			this.formItem.pageSize=size;
			this.getTable();
		},
		pageChange(number){
			this.formItem.pageNumber=number;
			this.getTable();
		},
		handleClickgetTable(){
			this.formItem.pageNumber=1;
			this.getTable();
		},
		async getTable(){
			this.loading=true;
			let form=JSON.parse(JSON.stringify(this.formItem));
			for(let key in form){
				if(form[key]==='全部'){
				form[key]='';
				}
			}
			if(!!this.search.timeRange[0]&&this.search.timeRange.length>0){
				form.startTime=util.time1(this.search.timeRange[0]);
				form.endTime=util.time1(this.search.timeRange[1]);
			}
			if(this.search.location.length>0&&!!this.search.location[0]){
				form.province=this.search.location[0];
				form.city=this.search.location[1];
				form.district=this.search.location[2];
			}
			let res=await getReRecords(form);
			if(res.status===200){
				let response=res.data;
				if(response.code===200){
					this.total=response.data.totalRow;
					this.data=response.data.list.map(item=>{
						item.time=item.modified.slice(0,16);
						return item
					});
					this.loading=false;
					this.downLoadUrl=`${url_rep_records}${util.pjArgu(form)}`
				}else{
					this.$Notice.error({
						title: '请求出错',
						desc:response.msg
					});
				}
			}else{
				this.$Notice.error({
					title: '请求失败'
				});
			} 
		},
		handleClickVideoPlay(src){
			this.look_video_wrap.look_video=true;
			this.look_video_wrap.src=src;
		},
		handleClickPicLook(src){
			this.look_pic_wrap.look_pic=true;
			this.look_pic_wrap.src=src;
		},
		async getDetails(uuid){
			this.repaire_details=this.empty_repaire_details;
			let res=await getRepaireDetails(uuid);
			let response=res.data;
			if(response.code===200){
				let {order_number,created,province,city,district,describe,faultType}=response.data.warning;
				let {name,mobile}=response.data.customer;
				let additional=response.data.board;
				let proName=!!response.data.pro?response.data.pro.name:'';
				let customername=response.data.customername;
				let equip=!!response.data.equip?response.data.equip.name:'';
				let inst_name=response.data.instName;
				let urgent=response.data.urgent_level;

				let imageList=response.data.imageList;
				if(!!imageList){
				imageList=[];
				}
				let video=response.data.video;
				let location=`${province} ${city}`;
				if(!!district){
				location=`${location} ${district}`
				}
				let startTime=created.slice(0,16);
				this.repaire_details={
				order_number,
				startTime,
				name,
				mobile,
				customername,
				location,
				inst_name,
				equip,
				describe,
				imageList,
				video,
				additional,
				proName,
				faultType,
				urgent
				}
				this.modal_repaire_detail=true;


			}else{
				this.$Notice.error({
						title: '请求出错',
						desc:response.msg
					});
			}
		},
	},
	created(){
		this.init();
		this.btnp=util.bpower(this,this.btn);
		this.getTable();
		
	}
}

</script>
<style lang='scss' >
.ivu-date-picker{
  width:100%;
}

.detail-form{
  padding:15px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  border-bottom:1px solid #eee;
  &-item{
    width:40%;
    padding: 5px 0;
    label{
      color:rgb(49, 48, 48);
    }
  }
  .detail-img-video{
    padding:5px 0 5px 70px;
    position:relative;
    width:100%;
    span{
      position: absolute;
      top:5px;
      left:0;
      color:rgb(49, 48, 48);
    }
    .wrap{
      display:flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      
      img,video{
        width:100px;
        height:100px;
        margin-bottom:10px;
        cursor: pointer;
      }
    }

  }
}
.detail-supplement{
  padding:10px 0 10px 40px;
  &-item{
    padding:6px 0;
    border-bottom:1px solid #eee;
    .spokesman{
      display: flex;
      align-items: center;
      margin-bottom:5px;
    }
    .speech{
      padding-left:50px;
      padding-right:20px;
    }
  }
}

</style>